<style scoped></style>
<template>
    <div>
        <el-input v-model="input" style="width: 240px" placeholder="输入爬取的岗位名称" clearable />
        <el-button type="primary" style="margin-left: 5px;" @click="getUrl">爬取</el-button>
    </div>
    <div v-if="pageNum != -1">
        <!-- 会触发方法加了页码才跳转。如果首次跳转，页码应为0，但是需要显示页数，不能直接显示0，因此这里显示时+1 -->
        <el-button type="success" style="margin-top: 10px;" @click="addPageNum()">
            <a :href="pageUrl" target="_blank"
                style="text-decoration: none; color: inherit; display: block; width: 100%; height: 100%;">
                获取第{{ pageNum + 1 }}页数据
            </a>
        </el-button>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import script from '../../apis/script.js';

const input = ref('');
const sourceUrl = ref('');
const pageUrl = ref('')
// &pageNum=1&pageSize=200
const pageNum = ref(-1); // 页码
const pageSize = ref(200); // 条数
const page = ref(''); // 拼接后的页码和条数
var isFirst = true;
const getUrl = async () => {
    // 检查输入框是否为空
    if (!input.value.trim()) {
        console.warn("输入框为空，请输入关键词");
        return; // 如果为空，直接返回，不执行后续代码
    }

    // 调用 getUrl 方法并传入输入框中的关键词
    const res = await script.getUrl(input.value);
    pageNum.value = 0;
    sourceUrl.value = res.data.empUrl; // 没有拼接页码条数的原链接
};
// 增加页码
const addPageNum = () => {
    pageNum.value = pageNum.value + 1;
    page.value = '&pageNum=' + pageNum.value + '&pageSize=' + pageSize.value
    pageUrl.value = sourceUrl.value + page.value;
}
</script>